'use strict';

///////////////////////////////////////
// Modal window

const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.btn--close-modal');
const btnsOpenModal = document.querySelectorAll('.btn--show-modal');

const openModal = function (e) {
  e.preventDefault();
  modal.classList.remove('hidden');
  overlay.classList.remove('hidden');
};

const closeModal = function () {
  modal.classList.add('hidden');
  overlay.classList.add('hidden');
};

for (let i = 0; i < btnsOpenModal.length; i++)
  btnsOpenModal[i].addEventListener('click', openModal);

btnCloseModal.addEventListener('click', closeModal);
overlay.addEventListener('click', closeModal);

document.addEventListener('keydown', function (e) {
  if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
    closeModal();
  }
});


console.log(document.documentElement);//得到html页面上的有所元素
console.log(document.head);//得到head标签内的所有元素
console.log(document.body);//得到body标签内的所有元素

//选择器的使用
const header = document.querySelector('.header')
console.log(document.querySelector('.header'));//返回类名是header的第一个元素
console.log(document.querySelectorAll('.section'));//返回类名是section的所有元素

console.log(document.getElementById('section--1'));//如果元素是id选择器，则可以用此种方式获得
console.log(document.getElementsByTagName('button'));//标签选择器

//新增元素
const message = document.createElement('div');
//设置元素的样式
message.classList.add('cookie-message');
//message.textContent = 'We use cookied for ....'
//还可以对message元素设置内嵌的html元素
message.innerHTML = 'We use cookied for ....<button class = "btn btn--close-cookie">got it!</button>'
//将元素添加到页面中,这里也表示了插入，将元素放到不同的位置就是插入了。
header.prepend(message);//prepend表示在header标签的最前面添加，有很多种位置，自己去看

//删除元素
document.querySelector('.btn--close-cookie').addEventListener('click',function(){
  message.parentElement.removeChild(message);
})

//样式style
message.style.backgroundColor = '#37383d';
message.style.width = '120%';
console.log(getComputedStyle(message));//得到message标签的所有样式
//更改自己定义的名字的样式
document.documentElement.style.setProperty('--color-primary','orangered');

//属性Attributes:拿到元素，方可得到其属性
const logo = document.querySelector('.nav__logo');
console.log(logo.alt);
console.log(logo.src);//得到完整版本的绝对值！
console.log(logo.classNmae);
console.log(logo.getAttribute('src'));//得到相对值！
//数据属性，即属性名前带有data的,名字和data后面带的内容保持一致
console.log(logo.dataset.versionNumber);

//类
logo.classList.add('c');
logo.classList.remove('c');
logo.classList.toggle('c');
console.log(logo.classList.contains('c'));

//滚动
const btnScroll =document.querySelector('.btn--scroll-to');
const section1 = document.querySelector('#section--1');
btnScroll.addEventListener('click',function(e){
  const s1coords = section1.getBoundingClientRect();//得到section绑定的矩阵
  console.log(s1coords);
  console.log(e.target.getBoundingClientRect());//得到按钮的绑定矩阵
  console.log('Current (X/Y)',window.pageXOffset,pageYOffset);
})